<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Vue起步</title>
</head>
<!-- 开发环境版本，包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<body>
<div id="app">
  声明式渲染::{{ message }}
</div>
<div id="app-2">
  动态绑定：:<span v-bind:title="message">
    鼠标悬停几秒钟查看此处动态绑定的提示信息！
  </span>
</div>
<div id="app-3">
  <p v-if="seen">条件与循环:现在你看到我了</p>
</div>
<div id="app-4">
  绑定数组的数据来渲染一个项目列表:
  <ol>
    <li v-for="todo in todos">
      {{todo.text}}
    </li>
  </ol>
</div>

<div id="app-5">
  <p>{{message}}</p>
  <button v-on:click="reverseMessage">逆转消息</button>
</div>
<div id="app-6">
  <p>{{message}}</p>
  <input v-model="message">
</div>
<ol>
  <!-- 创建一个 todo-item 组件的实例 -->
  <todo-item></todo-item>
</ol>
<div id="app-7">
  <ol>
    <!--
     现在我们为每个 todo-item 提供 todo 对象
     todo 对象是变量，即其内容可以是动态的。
     我们也需要为每个组件提供一个“key”，稍后再
     作详细解释。
   -->
    <todo-item
      v-for="item in groceryList"
      v-bind:todo="item"
      v-bind:key="item.id">
    </todo-item>
  </ol>
</div>
</body>
<script>
  Vue.component('todo-item', {
    props: ['todo'],
    template: '<li>{{ todo.text }}</li>'
  })

  var app7 = new Vue({
    el: '#app-7',
    data: {
      groceryList: [
        { id: 0, text: '蔬菜' },
        { id: 1, text: '奶酪' },
        { id: 2, text: '随便其它什么人吃的东西' }
      ]
    }
  })
  var app6 = new Vue({
    el: '#app-6',
    data: {
      message: '表单输入和应用状态之间的双向绑定Hello Vue!'
    }
  })

  var app5 = new Vue({
    el: '#app-5',
    data: {
      message: 'Hello Vue.js!'
    },
    methods: {
      reverseMessage: function () {
        console.log(this)
        this.message = this.message.split('').reverse().join('')
      }
    }
  })

  var app4 = new Vue({
    el: '#app-4',
    data: {
      todos: [{text: '学习 JavaScript'},
        {text: '学习 Vue'},
        {text: '整个牛项目'}]
    }
  })

  var app3 = new Vue({
    el: '#app-3',
    data: {
      seen: true
    }
  })

  var app2 = new Vue({
    el: '#app-2',
    data: {
      message: '页面加载于 ' + new Date().toLocaleString()
    }
  })
  var app = new Vue({
    el: '#app',
    data: {
      message: '第一个vue实例'
    }
  })

</script>
</html>
